<template>
	<v-content ref="content">
		<v-statusbar class="status-bar"></v-statusbar>
		<div class="header padding">
			<div class="title">首页</div>
			<!-- 添加排行榜按钮 -->
			<image class="rank-icon" src="/static/image/rank/icon.png" @click="toRankPage"></image>
		</div>

		<div class="banner" v-if="bannerList.length">
			<u-swiper :list="bannerList" previousMargin="47rpx" nextMargin="47rpx" circular radius="5" bgColor="none"
				interval="5000" @change="onSwiperChange"></u-swiper>
			<div class="dot">
				<div class="item" :class="[
						{
							active: index == bannerCurrent, 
						},
					]" v-for="(_item, index) in bannerList" :key="index"></div>
			</div>
		</div>

		<template v-if="article.list.length">
			<div class="article-title padding">
				AI推荐课程
				<div class="more" @click="refreshArticle" v-if="article.total > 4">
					<image src="/static/image/icon-refresh.png" class="icon"></image>
					换一换
				</div>
			</div>

			<div class="article-list padding">
				<div class="item" v-for="(item, index) in article.list" :key="index"
					@click="toPage('/pages/learn/details', { id: item.id })">
					<div class="image-wrap">
						<image class="image" :src="item.coverImg" mode="aspectFill"></image>
					</div>
					<div class="noimage" :style="{'backgroundColor': colors[index % 4]}">
					<div class="title" :style="{'color': index % 4 === 0 ? '#000' : '#fff'}">
					  {{ item.courseName }}
					</div>
					<div class="message">{{ item.totalMembers || 0 }}人学过</div>
					</div>
				</div>
				<div class="item"></div>
			</div>
		</template>

		<div class="notice margin" v-if="notice.length" @click="toExamPage">
			<image class="image" src="/static/image/index/notice.jpeg" mode="widthFix"></image>
			<div class="name">
				<u-notice-bar :text="noticeText" icon="" direction="row" bgColor=""></u-notice-bar>
			</div>
		</div>
		<template v-if="onlineExam.list.length">
			<div class="article-title padding">
				在线考试
				<div class="more arrow-right" @click="toPage('/pages/exam/index', { current: 0 }, 'tabbar')">
					查看更多
				</div>
			</div>

			<div class="examination margin" v-for="(item, index) in onlineExam.list" :key="index" @click="toExam(item)">
				<div class="title">
					<image class="icon" src="/static/image/icon-hot.png"></image>
					<div class="name">{{ item.examName }}</div>
					<div class="button">
						<image class="image" src="/static/image/icon-badge.png"></image>
						{{ item.totalScore }}分
					</div>
				</div>
				<div class="message">
					<div class="tip padding">{{ item.examEndTime }} 截止</div>
					{{ item.answeredNum || 0 }}人已考试
				</div>
			</div>
		</template>
		<ai-robot></ai-robot>
		<v-tabbar></v-tabbar>
	</v-content>
</template>

<script>
	import mixins from "@/mixins"
	import aiRobot from '@/components/ai-robot/index.vue'

	export default {
		name: "index",
		mixins: [mixins],
		components: {
			aiRobot
		},
		data() {
			return {
				colors : ['#e3fe37', '#4586fc', '#f58b41', '#a170fe'],
				notice: [],
				bannerList: [],
				bannerCurrent: 0,

				article: {
					list: [],
					page: 1,
					total: 0,
				},
				onlineExam: {
					list: [],
					total: 0,
					page: 1,
				},
				isLoadMore: false,
			}
		},
		computed: {
			noticeText() {
				return `${this.notice[0].examName}考试将于${this.notice[0].examStartTime}开始`
			},
		},
		methods: {
			init() {
				this.getBanner()
				this.getArticle()
				this.getOnlineExam()
				this.getNotice()
			},
			async getBanner() {
				const data = await this.$axios.get("/api/system/castleBanner/list")
				this.bannerList = data.map(item => item.bannerUrl)
			},
			async getArticle() {
				const {
					records,
					total
				} = await this.$axios.get("/api/study/course/studyCourse/page", {
					isRecommend: 1,
					currentPage: this.article.page,
					size: 4,
				})
				this.article.list = records
				this.article.total = total
			},
			async getNotice() {
				const notice = await this.$axios.get("/api/study/exam/studyExam/list/toRemind", {})
				this.notice = notice
			},
			refreshArticle() {
				if (this.article.page * 4 >= this.article.total) {
					this.article.page = 1
				} else {
					this.article.page++
				}

				this.getArticle()
			},

			onSwiperChange({
				current
			}) {
				this.bannerCurrent = current
			},

			async getOnlineExam() {
				const {
					records,
					total
				} = await this.$axios.get("/api/study/exam/studyExam/page/unanswered", {
					currentPage: this.onlineExam.page,
					size: 10,
				})
				this.onlineExam.list = this.onlineExam.list.concat(records)
				this.onlineExam.total = total
				// console.log(this.onlineExam.list)
			},

			toExam(item) {
				if (item.examEndTime) {
					if (new Date() > new Date(item.examEndTime)) {
						this.showMessage.error("考试已截止")
						return
					}
				}
				if (item.status == 3) {
					this.toPage("/pages/exam/result", {
						id: item.recordId
					})
				} else {
					this.toPage("/pages/exam/start", {
						id: item.id
					})
				}
			},
			toExamPage() {
				window.sessionStorage.setItem("examCurrent", 0)
				this.toPage("/pages/exam/index", "tabbar")
			},
			// 添加跳转到排行榜页面的方法
			toRankPage() {
				this.toPage('/pages/rank/index')
			},
			// 添加跳转到AI页面的方法
			toAIPage() {
				this.toPage('/pages/AI/chat')
			},
		},
		onReachBottom() {
			if (this.onlineExam.total > this.onlineExam.list.length) {
				this.isLoadMore = true
				this.onlineExam.page += 1
				this.getOnlineExam()
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import "../basis.scss";

	// 添加排行榜按钮样式
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.rank-icon {
		width: 50rpx;
		height: 50rpx;
	}

	.examination {
		border-bottom: 1px solid #f7f7f7;
		padding-bottom: 24rpx;
		
		.title {
			height: 100rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.icon {
				width: 30rpx;
				height: 40rpx;
				display: block;
				margin-right: 10rpx;
				flex: none;
			}

			.name {
				font-size: 32rpx;
				color: #333;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				padding-right: 20rpx;
			}

			.button {
				width: 126rpx;
				height: 55rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				border-radius: 1000px;
				background-image: linear-gradient(to right, #fea110, #ff800e);
				font-size: 24rpx;
				margin-left: auto;

				.image {
					width: 30rpx;
					height: 35rpx;
					margin-right: 10rpx;
				}
			}
		}

		.message {
			color: #888888;
			font-size: 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.tip {
				background: #f7f7f7;
				color: #b0b0b0;
				line-height: 50rpx;
			}
		}
	}

	.notice {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #fef4db;
		border-radius: 10rpx;
		padding-inline: 20rpx;

		.image {
			flex: none;
			width: 130rpx;
			height: 40rpx;
		}

		.name {
			font-size: 28rpx;
			flex: 1;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			color: #ee9338;
		}
	}
	.uni-fab{
		bottom: 100px;
	}

	// AI机器人GIF样式
	.ai-robot-gif {
		position: fixed;
		bottom: 100px;
		right: 20px;
		width: 80px;
		height: 80px;
		border-radius: 50%;
	}

	.banner {
		padding: 0 20rpx;
		.banner-container {
			position: relative;
			background: rgba(255, 255, 255, 0.9);
			border-radius: 20rpx;
			box-shadow: 0 6rpx 20rpx rgba(1, 149, 255, 0.15);
			overflow: hidden;
			padding: 15rpx;
			transition: all 0.3s ease;
		}
		dot {
			margin-top: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			item {
				width: 16rpx;
				height: 16rpx;
				border-radius: 50%;
				background: rgba(1, 149, 255, 0.3);
				margin: 0 10rpx;
				transition: all 0.3s ease;
				&.active {
					background: #0195ff;
					width: 40rpx;
					border-radius: 8rpx;
					transform: scale(1.1);
				}
			}
		}
	}

	// 调整轮播图内部图片样式
	.u-swiper__item { 
		border-radius: 12rpx; 
		overflow: hidden; 
	}

	.u-swiper__item image {
		width: 100%; 
		height: 100%; 
		border-radius: 12rpx; 
	}
</style>
